<template>
	<view class="container">
		<text class="title">定位城市</text>
		<view class="button-container">
			<text class="focus-button">焦作</text>
			<text class="relocate-text">重新定位</text>
		</view>

		<text class="title">热门城市</text>
		<view class="grid-container">
			<view class="grid-item" v-for="city in cities" :key="city">{{ city }}</view>
		</view>


		<view class="header">
			<text class="section-title">国内</text>
			<view class="underline"></view>
		</view>

		<view class="alphabet">
			<view class="letter" v-for="letter in letters" :key="letter" @click="scrollToCity(letter)">
				{{ letter }}
			</view>
		</view>

		<scroll-view scroll-y class="city-list" :scroll-top="scrollTop">
			<view v-for="(cities, letter) in cityList" :key="letter">
				<view :id="letter" class="letter-title">{{ letter }}</view>
				<view v-for="city in cities" :key="city" class="city">{{ city }}</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cities: ['上海', '深圳', '广州', '成都', '三亚', '杭州', '西安', '南京', '厦门'],
				letters: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''), // 生成26个字母
				scrollTop: 0,
				cityList: {
					'A': ['阿里', '安庆', '鞍山'],
					'B': ['北京市', '保定市', '八宿'],
					'C': ['成都市', '常州市', '重庆市'],
					'D': ['大连市', '东莞市'],
					'E': ['鄂尔多斯', '恩施'],
					'F': ['佛山市'],
					'G': ['广州市', '桂林市'],
					'H': ['杭州市', '合肥市'],
					'I': ['伊春'],
					'J': ['济源市','济南市', '江苏'],
					'K': ['昆明市', '喀什'],
					'L': ['兰州市', '丽江市'],
					'M': ['马鞍山', '梅州市'],
					'N': ['南京市', '南昌市'],
					'O': ['偶尔'],
					'P': ['济南', '攀枝花'],
					'Q': ['青岛市', '泉州市'],
					'R': ['日照市'],
					'S': ['上海市', '深圳市'],
					'T': ['天津市', '太原市'],
					'U': ['乌鲁木齐'],
					'V': ['维州'],
					'W': ['武汉市', '温州市'],
					'X': ['西安市', '厦门市'],
					'Y': ['扬州市', '宜昌市'],
					'Z': ['郑州市', '珠海']
				}
			};
		},
		methods: {
			scrollToCity(letter) {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery();
					query.select(`#${letter}`).boundingClientRect(rect => {
						if (rect) {
							this.scrollTop = rect.top; // 计算滚动位置
						}
					}).exec();
				});
			}
		}
	}
</script>

<style>
	.container {}

	.title {
		color: #999;
		font-size: 13px;
		margin-left: 20px;
		font-weight: 600;
	}

	.button-container {
		margin-top: 15px;
		margin-bottom: 10px;
		display: flex;
		align-items: center;
	}

	.focus-button {
		background-color: #f0f0f0;
		border-radius: 4px;
		padding: 3px 25px;
		font-size: 13px;
		margin-left: 20px;
	}

	.relocate-text {
		margin-left: 220px;
		color: #1e90ff;
		font-size: 13px;
	}


	.grid-container {
		display: flex;
		flex-wrap: wrap;
		margin-left: 20px;

	}

	.grid-item {
		background-color: #f5f5f5;
		border-radius: 4px;
		color: #000;
		padding: 8px 25px;
		margin: 7px;
		text-align: center;
		width: 50px;
		font-size: 14px;
	}

	.header {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 10px;
		border-bottom: 2px solid #E9E9E9;
		margin-top: 20px;
	}

	.section-title {
		margin-left: 100px;
		font-size: 16px;
		font-weight: bold;
	}

	.underline {
		width: 40px;
		height: 2px;
		background-color: #1890ff;
		margin-top: 5px;
		margin-left: 95px;
	}

	.alphabet {
		position: absolute;
		right: 5px;
		top: 100px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.letter {
		color: #1890ff;
		margin-right: 5px;
		cursor: pointer;
		font-size: 12px;
		margin-bottom: 5px;
	}

	.city-list {
		margin-left: 15px;
		max-height: 400px;
		/* 控制scroll-view的高度 */
		overflow-y: scroll;

		padding-right: 30px;
		/* 为右边的字母列表留出空间 */
	}

	.letter-title {
		color: #333;
		font-weight: bold;
		margin-top: 15px;
	}

	.city {
		padding: 5px 0;
		border-bottom: 2px solid #E9E9E9;
	}
</style>